<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DragDemo</title>
    <style>
        .content {
            display: flex;
            gap: 5px;
            width: 60%;
            margin: 50px auto;
        }

        .left-box {
            box-sizing: border-box;
            width: 150px;
            flex-shrink: 0;
        }

        .item {
            width: 150px;
            height: 40px;
            color: #fff;
            background-color: rgb(51, 127, 211);
            margin: 0 0 5px 0;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .middle-box {
            align-self: center;
            font-size: 20px;
        }

        .right-box {
            flex: 1;
        }

        table {
            width: 100%;
            height: 120px;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
        }

        th {
            background-color: rgb(233, 245, 253);
        }

        .drag-hover {
            background-color: rgba(51, 127, 211, 0.4);
        }

        th,
        td {
            text-align: center;
            height: 32px;
            line-height: 32px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left-box">
            <div draggable="true" class="item">数据一</div>
            <div draggable="true" class="item">数据二</div>
            <div draggable="true" class="item">数据三</div>
            <div draggable="true" class="item">数据四</div>
            <div draggable="true" class="item">数据五</div>
        </div>
        <div class="middle-box">></div>
        <div class="right-box">
            <table>
                <tr>
                    <th>列一</td>
                    <th>列二</td>
                    <th>列三</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        const items = document.querySelectorAll('.item');
        const tds = document.querySelectorAll('td');
        let dragIndex = 0; // 记录被拖拽元素的索引 
        for (let i=0; i<items.length; i++) {
            items[i].ondragstart = (e) => {
                dragIndex = i;
                e.dataTransfer.setData('text/plain', e.target.textContent);
            }
        }
        for (let td of tds) {
            td.ondragenter = (e) => {
                if (e.target.textContent) {
                    return;
                }
                e.target.classList.toggle('drag-hover');
            }
            td.ondragleave = (e) => {
                if (e.target.textContent) {
                    return;
                }
                e.target.classList.toggle('drag-hover');
            }
            td.ondragover = (e) => {
                e.preventDefault(); // 阻止默认事件，否则ondrog事件不触发
            }
            td.ondrop = (e) => {
                e.preventDefault(); // 默认结束拖拽时会打开新窗口
                if (e.target.textContent) {
                    return;
                }
                e.target.textContent = e.dataTransfer.getData('text/plain');
                e.target.classList.toggle('drag-hover');
                console.log(dragIndex);
                items[dragIndex].remove();
            }
        }
    </script>
</body>
</html>